<nz-divider nzOrientation="left" nzHeight="50px" nzText="抽出条件"></nz-divider>

<!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="画面IDをご選択ください">
      <input nz-input formControlName="email" id="email" />
    </nz-form-control>
  </nz-form-item>
</form> -->
<nz-input-group nzAddOnBefore="画面ID" nzSize="large">
  <nz-select style="width: 300px;" nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="画面IDをご選択ください" [(ngModel)]="selectedValue">
    <nz-option *ngFor="let item of screenIdList" [nzLabel]="item" [nzValue]="item"></nz-option>
  </nz-select>
</nz-input-group>
<!-- <nz-input-group nzAddOnBefore="Filter　" nzSize="large">
  <input nz-input placeholder="XXXXX,YYYYY,ZZZZZ" nzSize="large" style="width: 300px;" [(ngModel)]="filterValue"/>
</nz-input-group> -->

<div nz-row>
  <div nz-col [nzSpan]="24" class="search-area">
    <button nz-button [nzType]="'primary'" (click)="onSearch()">Search</button>
  </div>
</div>
<!-- <nz-space nzDirection="vertical">
  <nz-space-item>
    <nz-card nzTitle="Card" style="width: 300px">
      <p>Card content</p>
      <p>Card content</p>
    </nz-card>
  </nz-space-item>
</nz-space> -->
<!-- <div class="input-group input-group-lg">
  <span class="input-group-addon" style="width: 200px;">画面ID</span>
  <input type="text" class="form-control" placeholder="見出し;エリア;xxxxxx" style="width: 400px;">
  <span class="input-group-addon" style="width: 200px;">画面名</span>
</div>
<div class="input-group input-group-lg" style="margin-top: 10px;">
  <span class="input-group-addon" style="width: 200px;">Dto種類</span>
  <select class="form-control" style="width: 400px;">
    <option>画面ScreenDto1</option>
    <option>画面ScreenDto2</option>
    <option>画面ScreenDto3</option>
    <option>画面ScreenDto4</option>
    <option>画面ScreenDto5</option>
  </select>
  <span class="input-group-addon" style="width: 200px;">クラス名</span>
  <select class="form-control" style="width: 400px;">
    <option>XxxxxxxxxxScreenDto.java</option>
    <option>ZzzzzzzzzzScreenDto.java</option>
    <option>XxxxxxxxxxDto.java</option>
    <option>YyyyyyyyyyDto.java</option>
    <option>ZzzzzzzzzzDto.java</option>
  </select>
</div>
<div class="input-group input-group-lg" style="margin-top: 10px;">
  <span class="input-group-addon" style="width: 200px;">Filter</span>
  <input type="text" class="form-control" placeholder="見出し;エリア;xxxxxx" style="width: 1000px;">
</div> -->
<!-- <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
  <button type="button" class="btn btn-primary btn-lg" (click)="onSearch()">項目抽出</button>
</div> -->
<nz-divider nzOrientation="left" nzHeight="50px" nzText="ヘッダ"></nz-divider>
<nz-input-group nzAddOnBefore="クラス名（日本語）" nzSize="large">
  <input nz-input placeholder="XXX画面DTO" nzSize="large" style="width: 300px;" [(ngModel)]="classNm"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="クラス名（物理）　" nzSize="large">
  <input nz-input placeholder="jp.co.cie.kk.cmn.dto.xxx" nzSize="large" style="width: 300px;" [(ngModel)]="classCd"/>
</nz-input-group>

<div nz-row>
  <div nz-col [nzSpan]="24" class="search-area">
    <button nz-button [nzType]="'primary'" (click)="addRow(listOfData.size)">Add</button>
  </div>
</div>
<nz-divider nzOrientation="left" nzHeight="50px" nzText="項目明細"></nz-divider>
<!-- <button nz-button (click)="addRow(listOfData.size)" nzType="primary">Add</button> -->
    <nz-table #editRowTable nzBordered [nzData]="listOfData" nzTableLayout="fixed">
      <!-- <nz-spin nzTip="Loading...">
        <nz-alert nzType="info" nzMessage="Alert message title" nzDescription="Further details about the context of this alert."> </nz-alert>
      </nz-spin> -->
      <thead>
        <tr>
          <th nzWidth="20%">フィールド名（日本語）</th>
          <th nzWidth="20%">フィールド名（物理）</th>
          <th nzWidth="10%">構造形</th>
          <th nzWidth="20%">データ形</th>
          <th nzWidth="20%">備考</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of editRowTable.data">
          <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
            <td>{{ data.itemId }}</td>
            <td>{{ data.itemName }}</td>
            <td>{{ data.itemType }}</td>
            <td>{{ data.structure }}</td>
            <td>{{ data.itemExplanation }}</td>
            <td>
              <!-- <a (click)="addRow(data.id)">Add</a>&nbsp; -->
              <a (click)="startEdit(data.id)">Edit</a>&nbsp;
              <a nz-popconfirm nzPopconfirmTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
            </td>
          </ng-container>
          <ng-template #editTemplate>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.itemId" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.itemName" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.itemType" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.structure" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.itemExplanation" /></td>
            <td>
              <a (click)="saveEdit(data.id)" class="save">Save</a>
              <a nz-popconfirm nzPopconfirmTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
            </td>
          </ng-template>
        </tr>
      </tbody>
    </nz-table>

<!-- <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
  <button type="button" class="btn btn-danger btn-lg">仕様書作成</button>
</div> -->

<div nz-row>
  <div nz-col [nzSpan]="24" class="search-area">
    <button nz-button [nzType]="'primary'" (click)="onRegister()">仕様書作成</button>
  </div>
</div>
